<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Checkbox 多选框</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style>
.demo-button-style {
	margin-top: 24px;
}
.check-margin{
	margin-left: 28px;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍</p>
	<p class="desc">checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用 v-model 绑定 Array 类型的变量即可。 只有一个选项时的默认值类型为 Boolean，当选中时值为true。 el-checkbox 标签中的内容将成为复选框按钮之后的描述。</p>
	<div>
		<el-checkbox v-model="checked1" label="Option 1">是否</el-checkbox>
		<el-checkbox v-model="checked2" label="Option 2" disabled></el-checkbox>
	</div>
	<div>
		<el-checkbox v-model="checked3" label="Option 3" size="large"></el-checkbox>
		<el-checkbox v-model="checked4" label="Option 4" size="large"></el-checkbox>
	</div>
	<div>
		<el-checkbox v-model="checked5" label="Option 5" size=""></el-checkbox>
		<el-checkbox v-model="checked6" label="Option 6" size=""></el-checkbox>
	</div>
	<div>
		<el-checkbox v-model="checked7" label="Option 7" size="small"></el-checkbox>
		<el-checkbox v-model="checked8" label="Option 8" size="small"></el-checkbox>
	</div>
	<el-button type="primary" @click="see34Option">查看Option3&4的值</el-button>
	
	<el-divider content-position="left">禁用状态</el-divider><!-- =============================================================== -->
	<p class="desc">多选框不可用状态。</p>
	<p class="desc">设置 disabled 属性即可</p>
	<el-checkbox v-model="checked1" disabled>Disabled</el-checkbox>
	<el-checkbox v-model="checked11">Not disabled</el-checkbox>
	
	<el-divider content-position="left">多选框组</el-divider><!-- =============================================================== -->
	<p class="desc">适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。</p>
	<p class="desc">在 el-checkbox 元素中定义 v-model 绑定变量，单一的 checkbox 中，默认绑定变量的值会是 Boolean，选中为 true。 在 el-checkbox 组件中，label 是选择框的值。 如果该组件下没有被传入内容，那么 label 将会作为 checkbox 按钮后的介绍。 label 也与数组中的元素值相对应。 如果指定的值存在于数组中，就处于选择状态，反之亦然。</p>
	<!-- <el-checkbox-group v-model="checkList">
		<el-checkbox label="Option A" />Option A &nbsp; &nbsp;
		<el-checkbox label="Option B" />Option B &nbsp; &nbsp;
		<el-checkbox label="Option C" />Option C &nbsp; &nbsp;
		<el-checkbox label="disabled" disabled />Option D &nbsp; &nbsp;
		<el-checkbox label="selected and disabled" disabled />
	</el-checkbox-group> -->
	<el-checkbox-group v-model="checkList">
		<el-checkbox label="Option A"></el-checkbox>
		<el-checkbox label="Option B">选项B</el-checkbox>
		<el-checkbox label="Option C"></el-checkbox>
		<el-checkbox label="disabled" disabled></el-checkbox>
		<el-checkbox label="selected and disabled" disabled></el-checkbox>
	</el-checkbox-group>
	<el-button type="primary" @click="seeCheckList">查看checkList的值</el-button>
	
	<el-divider content-position="left">中间状态</el-divider><!-- =============================================================== -->
	<p class="desc">indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果</p>
	<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">Check all</el-checkbox>
	<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
		<el-checkbox v-for="city in cities" :key="city" :label="city">{{city}}</el-checkbox>
	</el-checkbox-group>
	
	<el-divider content-position="left">可选项目数量的限制</el-divider><!-- =============================================================== -->
	<p class="desc">使用 min 和 max 属性能够限制可以被勾选的项目的数量</p>
	<el-checkbox-group v-model="checkList2" :min="2" :max="4">
		<el-checkbox label="Option 1"></el-checkbox>
		<el-checkbox label="Option 2">选项2</el-checkbox>
		<el-checkbox label="Option 3"></el-checkbox>
		<el-checkbox label="Option 4"></el-checkbox>
		<el-checkbox label="Option 5"></el-checkbox>
		<el-checkbox label="Option 6"></el-checkbox>
	</el-checkbox-group>
	
	<el-divider content-position="left">按钮样式</el-divider><!-- =============================================================== -->
	<p class="desc">按钮样式的多选组合。</p>
	<p class="desc">只需要把 el-checkbox 元素替换为 el-checkbox-button 元素即可。 此外，Element Plus 还提供了size属性</p>
	<div>
		<el-checkbox-group v-model="checkboxGroup1" @change="handleChange" size="large">
			<el-checkbox-button v-for="city in cities" :key="city" :label="city">{{city}}</el-checkbox-button>
		</el-checkbox-group>
	</div>
	<div class="demo-button-style">
		<el-checkbox-group v-model="checkboxGroup2" @change="handleChange">
			<el-checkbox-button v-for="city in cities" :key="city" :label="city">{{city}}</el-checkbox-button>
		</el-checkbox-group>
	</div>
	<div class="demo-button-style">
		<el-checkbox-group v-model="checkboxGroup3" size="small">
			<el-checkbox-button v-for="city in cities" :key="city" :label="city" :disabled="city === '北京'">{{city}}</el-checkbox-button>
		</el-checkbox-group>
	</div>
	<div class="demo-button-style">
		<el-checkbox-group v-model="checkboxGroup4" size="small" disabled>
			<el-checkbox-button v-for="city in cities" :key="city" :label="city">{{city}}</el-checkbox-button>
		</el-checkbox-group>
	</div>
	
	<el-divider content-position="left">带有边框</el-divider><!-- =============================================================== -->
	<p class="desc">设置border属性可以渲染为带有边框的多选框。</p>
	<div>
		<el-checkbox v-model="checked11" label="Option1" border size="large" @change="handleChange"></el-checkbox>
		<el-checkbox v-model="checked12" label="Option2" border size="large" @change="handleChange"></el-checkbox>
	</div><br>
	<div class="demo-with-border">
		<el-checkbox v-model="checked13" label="Option1" border></el-checkbox>
		<el-checkbox v-model="checked14" label="Option2" border></el-checkbox>
	</div><br>
	<div class="demo-with-border">
		<el-checkbox-group v-model="checkboxGroup1" size="small">
			<el-checkbox label="Option1" border></el-checkbox>
			<el-checkbox label="Option2" border disabled></el-checkbox>
		</el-checkbox-group>
	</div><br>
	<div class="demo-with-border">
		<el-checkbox-group v-model="checkboxGroup2" size="small" disabled>
			<el-checkbox label="Option1" border></el-checkbox>
			<el-checkbox label="Option2" border></el-checkbox>
		</el-checkbox-group>
	</div><br>
	
	<el-divider content-position="left">自定义 - 权限系统会用到</el-divider><!-- =============================================================== -->
	<p class="desc">上面 “中间状态” 的升级</p>
	<el-checkbox-group v-model="arr_checked_node" @change="checkChange">
		<div v-for="item1 in arr_tree" :key="item1.id" class="check-margin">
			<el-checkbox :key="item1.id" :label="item1.id" @change="handleChange1(item1.id)">{{item1.id}}、{{item1.name}}</el-checkbox>
			<div v-if="item1.children" v-for="item2 in item1.children" class="check-margin">
				<el-checkbox :key="item2.id" :label="item2.id" @change="handleChange2(item2.id)">{{item2.id}}、{{item2.name}}</el-checkbox><br>
				<div v-if="item2.children" v-for="item3 in item2.children" class="check-margin" style="display: inline-block;">
					<el-checkbox :key="item3.id" :label="item3.id" @change="handleChange3(item3.id)">{{item3.id}}、{{item3.name}}</el-checkbox>
				</div>
			</div>
		</div>
	</el-checkbox-group>
	
</div>
</body>
<script>
function get_tree(arr){
	let ret = [], hash = {}, i = 0, j = 0, len = arr.length;
	for(; i < len; i++){
		hash[arr[i]['id']] = arr[i];
	}
	for(; j < len; j++){
		let arr_val = arr[j], p_val = hash[arr_val['pid']]
		if(p_val){
			!p_val['children'] && (p_val['children'] = []);
			p_val['children'].push(arr_val);
		}else{
			ret.push(arr_val);
		}
	}
	return ret;
}

let arr_node = [
	{id: 1, pid: 0, name: '人员架构', level: 1, type: 1,},
	{id: 2, pid: 0, name: '员工互评', level: 1, type: 1,},
	{id: 3, pid: 1, name: '导入员工', level: 2, type: 2,},
	{id: 4, pid: 1, name: '部门架构图', level: 2, type: 2,},
	{id: 5, pid: 1, name: '员工管理', level: 2, type: 2,},
	{id: 6, pid: 2, name: '评分', level: 2, type: 2,},
	{id: 7, pid: 2, name: '我的得分', level: 2, type: 2,},
	{id: 8, pid: 2, name: '所有评分', level: 2, type: 2,},
	{id: 9, pid: 3, name: '上传权限', level: 3, type: 3,},
	{id: 10, pid: 3, name: '提交权限', level: 3, type: 3,},
	{id: 11, pid: 8, name: '筛选查询', level: 3, type: 3,},
	{id: 12, pid: 8, name: '导出', level: 3, type: 3,},
];


let obj_node = {};
for(let i in arr_node){
	obj_node[arr_node[i]['id']] = arr_node[i];
}
let arr_tree = get_tree(arr_node);

const Main = {
	data() {
		return {
			msg: 'Hello Vue!!',
			checked1: true,
			checked2: false,
			checked3: false,
			checked4: false,
			checked5: false,
			checked6: false,
			checked7: false,
			checked8: false,
			checkList: ['selected and disabled', 'Option A'],
			checkList2:['Option 1', 'Option 2', 'Option 5'],
			
			checkboxGroup1: ['Shanghai'],
			checkboxGroup2: ['Shanghai'],
			checkboxGroup3: ['Shanghai'],
			checkboxGroup4: ['Shanghai'],
			cities: ['上海', '北京', '广州', '深圳'],
			
			checked11: true,
			checked12: false,
			checked13: false,
			checked14: true,
			checkboxGroup1: [],
			checkboxGroup2: [],
			
			checkAll: true,
			isIndeterminate: true,
			checkedCities: ['上海', '北京'],
			
			checkAll1: false,
			obj_node: obj_node,
			arr_checked_node: [1, 3, 9],	//要去重
			arr_tree: arr_tree,
			
			
			
		}
	},
	mounted(){
		this.$nextTick(function () {
			console.log(this.arr_tree);
			// console.log(this.arr_checked_node);
			// this.deleteNode([9, 10]);
			// console.log(this.arr_checked_node);
		})
	},
	computed:{
		getStyle2(){
			return function(item){
				return '';
			}
		}
		
		
	},
	methods:{
		checkChange(val){
			// console.log(val)
			// this.$data.checkedCities = val ? this.$data.cities : []
			// this.$data.isIndeterminate = false
		},
		//根据id，获取其下所有节点的id
		getNamesById(id){
			var item = obj_node[id];
			var arr_id = [id];
			if(item.children){
				for(var i in item.children){
					arr_id.push(item.children[i].id);
					if(item.children[i].children){
						for(var j in item.children[i].children){
							arr_id.push(item.children[i].children[j].id);
						}
					}
				}
			}
			return arr_id;
		},
		//根据2级节点Id，获取其父节点
		getPNodeByL2Id(id){
			return obj_node[id]['pid'];
		},
		//根据3级节点Id，获取其父节点，及其父节点的父节点
		getPNodeByL3Id(id){
			let pid = obj_node[id]['pid'];
			let ppid = obj_node[pid]['pid'];
			return [ppid, pid];
		},
		//增加node
		insertNode(arr_node){
			if(arr_node.length > 0){
				this.arr_checked_node = this.arr_checked_node.concat(arr_node);
				this.arr_checked_node = [...new Set(this.arr_checked_node)];
			}
		},
		//删除node
		deleteNode(arr_node){
			if(arr_node.length > 0){
				for(let i in arr_node){
					let del_key = this.arr_checked_node.indexOf(arr_node[i]);
					if(del_key != -1){
						this.arr_checked_node.splice(del_key, 1);
					}
				}
				this.arr_checked_node = [...new Set(this.arr_checked_node)];
			}
		},
		//点击一级的联动
		handleChange1(id){
			let arr_id = this.getNamesById(id);
			if(this.arr_checked_node.includes(id)){
				console.log('L1全选');
				this.insertNode(arr_id);
			}else{
				console.log('L1全取消');
				this.deleteNode(arr_id);
			}
		},
		//点击二级的联动
		handleChange2(id){
			let arr_id = this.getNamesById(id);
			if(this.arr_checked_node.includes(id)){
				console.log('L2选择');
				this.insertNode(arr_id);
				
				let pid = this.getPNodeByL2Id(id);
				if(!this.arr_checked_node.includes(pid)){
					this.arr_checked_node.push(pid);
				}
			}else{
				console.log('L2取消');
				this.deleteNode(arr_id);
			}
		},
		//点击三级的联动
		handleChange3(id){
			if(this.arr_checked_node.includes(id)){
				console.log('L3选择');
				let arr_pid = this.getPNodeByL3Id(id);
				if(arr_pid.length == 2){
					if(!this.arr_checked_node.includes(arr_pid[0])){
						this.arr_checked_node.push(arr_pid[0]);
					}
					if(!this.arr_checked_node.includes(arr_pid[1])){
						this.arr_checked_node.push(arr_pid[1]);
					}
				}
			}else{
				console.log('L3取消');
			}
		},
		
		
		
		handleChange(v){
			console.log(v);
			// 下面这两种写法效果相同：
			console.log(this.msg);
			console.log(this.$data.msg);
		},
		handleCheckAllChange(val){
			console.log(val)
			this.$data.checkedCities = val ? this.$data.cities : []
			this.$data.isIndeterminate = false
		},
		handleCheckedCitiesChange0(value){
			console.log(value)
			const checkedCount = value.length
			this.$data.checkAll = checkedCount === this.$data.cities.length
			this.$data.isIndeterminate = checkedCount > 0 && checkedCount < this.$data.cities.length
		},
		handleCheckedCitiesChange(value){
			console.log(value)
			const checkedCount = value.length
			this.checkAll = checkedCount == 0 ? false : true;
			this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
		},
		see34Option(){
			console.log(this.$data.checked3, this.$data.checked4)
		},
		seeCheckList(){
			console.log(this.$data.checkList)
		},
		
	}
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");

</script>
</html>